<template>
  <div class="zy-content">
    <back-level :go-page="close"></back-level>
    <Form ref="acceptanceAddForm" :model="formItem" :label-width="200">
      <Card :title="$t('preliminary.BasicInformation')" class="detail-content-layout">
        <div class="basic-info">
          <div class="basic-info-body">
            <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ContractNumber')}`">
                  <div class="basic-info-body-item">{{ formItem.contractNo }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('equipCheck.SerialNo')}`">
                  <div class="basic-info-body-item">{{ formItem.deviceMId }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('maintenance.EquipmentName')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.deviceName }}
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row style="border-bottom: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('equipCheck.Model')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.specification }}
                  </div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ManufacturingNumber')}`">
                  <div class="basic-info-body-item">{{ formItem.factoryNo }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Manufacturer')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.manufacturer }}
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row style="border-bottom: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ManufacturingDate')}`">
                  <div class="basic-info-body-item">{{ formItem.produceDate }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Vendor')}`">
                  <div class="basic-info-body-item">{{ formItem.supplier }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Entity')}`">
                  <div class="basic-info-body-item">{{ formItem.belongCompanyName }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row style="border-bottom: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Department')}`">
                  <div class="basic-info-body-item">{{ formItem.useDept }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Location')}`">
                  <div class="basic-info-body-item">{{ formItem.position4 }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('ledger.Voltage')}（V）`">
                  <div class="basic-info-body-item">{{ formItem.voltage }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row style="border-bottom: 1px solid #eee">
              <Col span="8" style="border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('ledger.EquipmentPower')}`">
                  <div class="basic-info-body-item">{{ formItem.ratedPower }}</div>
                </FormItem>
              </Col>
              <Col span="8" style="border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('ledger.EquipmentWeight')}`">
                  <div class="basic-info-body-item">{{ formItem.weight }}</div>
                </FormItem>
              </Col>
            </Row>
          </div>
        </div>
      </Card>
      <Card :title="$t('preliminary.FinalAcceptanceTest')" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.PlannedAcceptanceTestDate')}`">
                  <div class="basic-info-body-item">{{ formItem.yjyst }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ActualAcceptanceTestDate')}`">
                  <div class="basic-info-body-item">{{ formItem.finalAcceptDate }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Technicalappendix')}`">
                  <div class="basic-info-body-item">
                    <Tag class="item-src"
                         color="blue"
                         type="border"
                         v-for="(item, index) in formItem.jszlFile"
                         @click.native="handlePreview(item)"
                         :key="index">
                      {{ item.fileName }}
                    </Tag>
                  </div>
                </FormItem>
              </Col>
            </Row>
          </div>

          <div class="tableContent">
            <Table
                :columns="columns"
                :data="formItem.checkList"
            >
            </Table>
          </div>
        </div>
      </Card>
      <Card :title="$t('preliminary.AcceptanceTestParticipant')" v-show="result!=0" class="detail-content-layout mt16">
        <div class="basic-info" >
          <div class="basic-info-body">
            <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.UserDepartmentOwner')}:`">
                  <div class="basic-info-body-item">{{ formItem.belongDeptAdminName }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.EHSDepartmentOwner')}:`">
                  <div class="basic-info-body-item">{{ formItem.safeUserName }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.QualityDepartmentOwner')}:`">
                  <div class="basic-info-body-item">{{ formItem.qualityUserName }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="8" style="border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('preliminary.ProjectOwner')}:`">
                  <div class="basic-info-body-item">{{ formItem.projectUserName }}</div>
                </FormItem>
              </Col>
              <Col span="8" style="border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('preliminary.Vendor')}:`">
                  <div class="basic-info-body-item">{{ formItem.supplier }}</div>
                </FormItem>
              </Col>
              <Col span="8" style="border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('ledger.Others')}:`">
                  <div class="basic-info-body-item">{{ formItem.otherUserName }}</div>
                </FormItem>
              </Col>
            </Row>
          </div>
        </div>
      </Card>
      <Card :title="$t('preliminary.FinalAcceptanceTest')" v-show="result!=0" class="detail-content-layout mt16">
        <div class="basic-info" >
          <div class="basic-info-body">
          </div>
          <div class="tableContent">
            <Table :columns="finallyColumns" :data="finallyDataSource">
              <template slot-scope="{ row }" slot="ysjl">
                            <span v-for="(item, index) in row.zxjszlFile" :key="index" class="dwFileUrl">
                                <Tag type="border"
                                     color="blue"
                                     @click.native="handlePreview(item)">
                                    {{ item.fileName }}
                                </Tag>
                            </span>
              </template>
            </Table>
          </div>
        </div>
      </Card>
    </Form>
  </div>
</template>

<script>
export default {
    name: "detailCheckModal",
    data() {
        return {
            sjFlag: '',
            finallyFlag: '',
            cjFlag: '',
            aFlag: '',
            gFlag: '',
            result: '',
            sendInfoVisible: false,
            formItem: {},
            packages: [{id: 1, value: this.$t('acceptanceCheck.alreadyArrived')}, {
                id: 0,
                value: this.$t('acceptanceCheck.NotYetArrived')
            }],
            tranings: [{id: 1, value: this.$t('acceptanceCheck.trained')}, {
                id: 0,
                value: this.$t('acceptanceCheck.untrained')
            }],
            checks: [{id: 1, value: this.$t('acceptanceCheck.checked')}, {
                id: 0,
                value: this.$t('acceptanceCheck.unchecked')
            }],
            types: [{id: 1, value: this.$t('acceptanceCheck.Qualified')}, {
                id: 2,
                value: this.$t('acceptanceCheck.Unqualified')
            }],
            columns: [
                {
                    title: `${this.$t('preliminary.FATIndex')}`,
                    key: 'checkTarget',
                    align: 'center',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.FinalAcceptanceFATContent')}`,
                    key: 'checkContent',
                    align: 'center',
                    // minWidth: 120,
                },

                {
                    title: `${this.$t('preliminary.FinalAcceptanceFATResult')}`,
                    key: 'checkResult',
                    align: 'center',
                    // minWidth: 120,
                    render: (h, params) => {
                        return h('div', params.row.checkResult == 1 ? this.$t('acceptanceCheck.Qualified') : this.$t('acceptanceCheck.Unqualified'))
                    }

                },
                {
                    title: `${this.$t('preliminary.NonConformingReason')}`,
                    key: 'checkDesc',
                    align: 'center',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.Version')}`,
                    key: 'version',
                    align: 'center',
                    // minWidth: 120
                },
            ],
            data: [],
            finallyColumns: [
                {
                    title: `${this.$t('preliminary.AcceptanceDate')}`,
                    key: 'finalAcceptDate',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.UserDepartmentOwner')}`,
                    key: 'belongDeptAdminName',
                    align: 'center',
                },
                // {
                //     title: '厂务负责人',
                //     key: 'factoryAdminName',
                //     align: 'center',
                // },
                {
                    title: `${this.$t('preliminary.AcceptanceTestResult')}`,
                    key: 'finalAcceptResultText',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.AcceptanceTestInterpretation')}`,
                    key: 'finalAcceptRemark',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.Acceptancedata')}`,
                    key: 'zxjszlFile',
                    align: 'center',
                    slot: 'ysjl'
                }
            ],
            finallyDataSource: []
        }
    },
    created() {
        this.result = this.$route.query.finalAcceptResult
        this.sendInfoVisible = true
        this.finallyDataSource = []
        this.getDetail(this.$route.query.deviceMId)
    },
    methods: {
        close() {
            this.$router.go(-1)
        },
        getDetail(deviceMId) {
            this.axios({
                method: 'post',
                url: '/dms/dmsCheck/get',
                params: {
                    deviceMId: deviceMId
                }
            }).then(res => {
                
                if (res.code == 200) {
                    this.$nextTick(() => {
                        if (res.data.checkList && res.data.checkList.length) {
                            res.data.checkList.forEach(val => {
                                val.showStatus = true
                                val.version = 'V' + val.version
                            })
                        }
                        this.formItem = res.data
                        this.formItem.finalAcceptDate = this.result != 1 ? '' : res.data.finalAcceptDate
                        // this.finallyDataSource.push({
                        //     finalAcceptDate: res.data.finalAcceptDate,
                        //     finalAcceptResultText: res.data.finalAcceptResultText,
                        //     finalAcceptRemark: res.data.finalAcceptRemark,
                        //     belongDeptAdminName: res.data.belongDeptAdminName,
                        //     factoryAdminName: res.data.factoryAdminName,
                        //     zxjszlFile: res.data.zxjszlFile
                        // })
                        this.finallyDataSource = res.data.zzysList
                        this.sjFlag = this.formItem.sjfjFile && this.formItem.sjfjFile.length ? 1 : 0
                        this.finallyFlag = this.formItem.jszlFile && this.formItem.jszlFile.length ? 1 : 0
                        this.cjFlag = this.formItem.cjpxFile && this.formItem.cjpxFile.length ? 1 : 0
                        this.aFlag = this.formItem.ajdFile && this.formItem.ajdFile.length ? 1 : 0
                        this.gFlag = this.formItem.gjdFile && this.formItem.gjdFile.length ? 1 : 0
                    })
                }
            })
        },
        //文件预览
        handlePreview(item) {
            if (item) {
                window.open(this.util.filePathToUrl(item.filePath));
            }
        },
        handleVisibleChange() {
        }
    }
}
</script>

<style scoped lang="scss">
.basic-info {
    .basic-info-title {
        span {
            display: inline-block;
            width: 7px;
            height: 24px;
            background: #187bdb;
        }

        h2 {
            display: inline-block;
            font-size: 16px;
            padding-left: 10px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
        }
    }

    .basic-info-body {
        margin: 10px;
        color: #333;
        font-size: 13px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        border-left: 1px solid #eee;

        .basic-info-body-label {
            display: inline-block;
            width: 40%;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            text-align: right;
            padding-right: 10px;
            /*border-left: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }

        .basic-info-body-item {
            /*display: inline-block;*/
            /*width: 60%;*/
            /*height: 48px;*/
            /*line-height: 48px;*/
            /*text-align: left;*/
            padding: 0 10px;
            /*border-left: 1px solid #eee;*/
            /*border-right: 1px solid #eee;*/
            /*border-right: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }
    }
}

.preview {
    position: absolute;
    right: 10px;
    top: 0;
    width: 35px;
    height: 35px;
    background: #eee;

    .preview-img {
        width: 35px;
        height: 35px;
        overflow: hidden;
    }
}

::v-deep .ivu-form-item-content {
    margin-bottom: 0;
    margin-left: 5px !important;
}

::v-deep .ivu-form-item-label {
    margin-bottom: 0;
    padding: 15px 12px 10px 0 !important;
    background: #f5f6f7;
    text-align: right;
    border-right: 1px solid #eee;
}

::v-deep .ivu-form-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    border-right: 1px solid #eee;
}

::v-deep .Input-wrapper {
    width: 90%;
    margin: 0 10px;

    .ivu-select-selection {
        height: 30px;
        border: none;
        box-shadow: none;
    }

    .ivu-input {
        border: none;
        box-shadow: none;
    }
}

.btn-wrapper {
    position: relative;

    .btn-action {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 100px;
    }
}

.upload-wrapper {
    display: inline-block;
    position: relative;

    span {
        display: inline-block;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: -8px;
        line-height: 26px;
    }

    .upload-action {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        bottom: 0px;
        background: rgba(0, 0, 0, .6);

        i {
            cursor: pointer;
            margin: 0 10px;
        }
    }

    &:hover {
        .upload-action {
            display: inline-block;
        }
    }
}

::v-deep .ivu-upload {
    margin-bottom: -15px;
    display: inline-block;
}

.over-wrapper {
    width: 200px;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .ivu-select-selected-value {
    background: #ffffff;
    color: #333333;
}

::v-deep .ivu-input-disabled {
    background: #ffffff;
    color: #333333;
}

::v-deep .ivu-select-placeholder {
    background: #ffffff;
    color: #333333;
}

::v-deep .ivu-select-input {
    background: #fff;
    height: 30px;
}

.file-list {
    width: 100%;
    margin: 0 20px;

    .item-src {
        width: 80%;
        display: inline-block;
        line-height: 26px;
        color: #187bdb;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .item-icon {
        width: 20%;
        display: inline-block;
        margin-top: 4px;
    }
}

.dwFileUrl {
    width: 100%;
    color: #187bdb;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>
